﻿<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Pragma" content="no-cache" />
  <title>Check</title>
  <link href="../../assets/css/reset.css" type="text/css" rel="stylesheet">
  <link href="./assets/css/grid.css" type="text/css" rel="stylesheet">
  <link href="./assets/css/main.css" type="text/css" rel="stylesheet">
</head>

<body>
  <main>


      <!-- <button id="btnCreate" style="width: 100%">Generate poster</button> -->


      <div class="tabs">
        <!-- <nav>
          <a href="#fmtOption" class="active"><i class="icon icon-14 iconfont">&#xe753;</i> Format options</a>
        </nav> -->

        <section id="fmtOption">
          <ol class="row">
            <li class="col-4">
              <label>↖</label>
              <div id="avoidLT" class="place-show" contenteditable="true" placeholder="left-T"></div>
            </li>
            <li class="col-4">
              <label>↑</label>
              <div id="avoidT" class="place-show" contenteditable="true" placeholder="top"></div>
            </li>
            <li class="col-4">
              <label>↗</label>
              <div id="avoidRT" class="place-show" contenteditable="true" placeholder="right-T"></div>
            </li>
          </ol>

          <ol class="row">
            <li class="col-4">
              <label>←</label>
              <div id="avoidL" class="place-show" contenteditable="true" placeholder="left"></div>
            </li>
            <li class="col-4">
              <div class="place-show align-center" contenteditable="false" placeholder=" [← Safe →]"></div>
            </li>
            <li class="col-4">
              <label>→</label>
              <div id="avoidR" class="place-show" contenteditable="true" placeholder="right"></div>
            </li>
          </ol>

          <ol class="row">
            <li class="col-4">
              <label>↙</label>
              <div id="avoidLB" class="place-show" contenteditable="true" placeholder="left-B"></div>
            </li>
            <li class="col-4">
              <label>↓</label>
              <div id="avoidB" class="place-show" contenteditable="true" placeholder="bottom"></div>
            </li>
            <li class="col-4">
              <label>↘</label>
              <div id="avoidRB" class="place-show" contenteditable="true" placeholder="right-B"></div>
            </li>
          </ol>

          <ol class="row">
            <li class="col-12"><hr></li>
          </ol>

          <ol class="row">

            <li  class="col-4">
              <select id="fmtSize" class="option-button">
                <option value="S">S</option>
                <option value="M">M</option>
                <option value="L" selected="selected">L</option>
                <option value="XL">XL</option>
             </select>
            </li>
            <li class="col-2">
              <div id="fmtJtRatio" class="place-show" contenteditable="false" placeholder="ratio">1.2</div>
            </li>
            <li class="col-2">
              <div id="fmtVwRatio" class="place-show" contenteditable="false" placeholder="ratio">0.8</div>
            </li>
            <li  class="col-4">
              <div id="isCustom" class="check-button" toggle="fmtJtRatio fmtVwRatio">
                <i class="icon icon-14 iconfont ">&#xe938;</i>
              </div>
            </li>
          </ol>

          <ol class="row">
            <li  class="col-2">
              <div id="isVLogo" class="check-button" name="logoType">
                <i class="icon iconfont ">&#xe61e;</i>
              </div>
            </li>
            <li  class="col-2">
              <div id="isHLogo" class="check-button" name="logoType">
                <i class="icon icon-18 iconfont ">&#xe61f;</i>
              </div>
            </li>
            <li  class="col-2">
              <div id="needY" class="check-button">
                <i class="icon icon-16 iconfont ">&#xe615;</i>
              </div>
            </li>

            <li  class="col-2">
              <div id="need30" class="check-button active">
                <i class="icon icon-16 iconfont ">&#xe620;</i>
              </div>
            </li>
            <li  class="col-2">
              <div id="isLight" class="check-button">
                <i class="icon icon-16 iconfont ">&#xe62e;</i>
              </div>
            </li>
            <li  class="col-2">
              <div id="needQR" class="check-button">
                <i class="icon icon-14 iconfont ">&#xe647;</i>
              </div>
            </li>
          </ol>

          <ol class="row">
            <li  class="col-2">
              <div id="isMob" class="check-button active" name="mediaType"  type="radio">
                <i class="icon icon-14 iconfont ">&#xe606;</i>
              </div>
            </li>
            <li  class="col-2">
              <div id="isWeb" class="check-button"  name="mediaType" type="radio">
                <i class="icon icon-14 iconfont ">&#xe616;</i>
              </div>
            </li>
            <li  class="col-2">
              <div id="isPrint" class="check-button"  name="mediaType" type="radio">
                <i class="icon icon-16 iconfont ">&#xe644;</i>
              </div>
            </li>
            <li  class="col-2">
              <div id="isOutdoor" class="check-button"  name="mediaType" type="radio">
                <i class="icon icon-14 iconfont ">&#xe621;</i>
              </div>
            </li>
            <li  class="col-2">
              <div id="isAll" class="check-button active">
                <i class="icon icon-16 iconfont ">&#xe6f8;</i>
              </div>
            </li>
            <li  class="col-2">
              <div id="needLayer" class="check-button">
                <i class="icon icon-14 iconfont ">&#xe7ee;</i>
              </div>
            </li>
          </ol>

        </section>
      </div>

      <button id="checkFormat" class="submit"><i class="icon icon-14 iconfont ">&#xe67f;</i> check</button>

  </main>

  <script type="text/javascript" src="../../assets/js/CSInterface.js"></script>
  <script type="text/javascript" src="../../assets/js/jquery2.1.js"></script>
  <script type="text/javascript" src="./assets/js/ui.js"></script>
  <script type="text/javascript" src="./bindEvents.js"></script>

</body>
</html>
